<template>
  <div id="app">
    <a-locale-provider :locale="locale">
      <a-spin :spinning="spinningLoading">
        <div class="box_1 flex-row justify-end">
          <div class="box_3 flex-col">
            <div class="text-wrapper_1 flex-col">
              <span class="text_4">欢迎登录</span>
            </div>
            <div class="group_2 flex-row justify-between">
              <a-icon slot="prefix" type="user" />
              <div class="text-wrapper_2 flex-col">
                <a-input placeholder="请输入用户名" v-model="userName" ref="userNameInput"></a-input>
              </div>
            </div>
            <div class="group_3 flex-row justify-between">
              <a-icon slot="prefix" type="lock" />
              <div class="text-wrapper_3 flex-col">
                <a-input placeholder="请输入密码" v-model="passWord" type="password" ref="userNameInput" @pressEnter="goLogin">
                </a-input>
              </div>
            </div>
            <div class="text-wrapper_4 flex-row justify-between">
              <!-- <span class="text_7">忘记密码？</span>
              <span class="text_8">注册</span> -->
            </div>
            <button type="submit" class="login_button" @click="goLogin">登录</button>
          </div>
        </div>
      </a-spin>
    </a-locale-provider>
  </div>
</template>
<script>
import "@/assets/css/gyhlwlogin.css";
import logo from "@/assets/images/bbw-logoa.png";
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import md5 from "js-md5";
export default {
  name: "app",
  data() {
    return {
      isActive: "",
      spinningLoading: false,
      colonbj: true,
      colonck: false,
      colseboard: false, //禁止ESC，遮罩层点击关闭弹窗
      logo: logo,
      // userName: "049405",
      // passWord: "123456",
      userName: "",
      passWord: "",
      locale: zhCN, //国际化 中文
      resetPasswordModalShow: false, //修改密码弹窗
      forgetPasswordModalShow: false,
    };
  },
  beforeCreate() {
    this.resetPassword = this.$form.createForm(this);
    // um-enterprise-manage
  },
  created() {
    // this.$store.state.login_active = 0;
    if (localStorage.token) {
      // this.$router.replace("/home/dashbord");
      this.$router.replace("/home/enterpriseInfo/list");
    }
    this.passWordFn;
  },
  methods: {
    //用户重置初始密码
    changePassword(e) {
      e.preventDefault();
      var that = this;
      this.resetPassword.validateFieldsAndScroll((err, values) => {
        if (!err) {
          that.$confirm({
            title: "是否保存数据",
            content: "",
            cancelText: "取消",
            okText: "保存",
            onOk() {
              that
                .postAxios(that.$sysUserChangePassword, {
                  username: that.userName,
                  newPassword: values.newPassword,
                })
                .then((res) => {
                  if (res.code === 200) {
                    that.profileEditModalShow = false;
                    that.$success({
                      title: "提示",
                      content: "修改初始密码成功",
                    });
                    that.resetPasswordModalShow = false;
                  } else {
                    that.$error({
                      title: "提示",
                      content: res.message,
                    });
                  }
                })
                .catch((err) => {
                  that.$error({
                    title: "提示",
                    content: err.message,
                  });
                });
            },
            onCancel() {
              that.profileEditModalShow = false;
              that.resetPasswordModalShow = false;
            },
          });
        }
      });
    },
    //确认密码
    handleConfirmPass(rule, value, callback) {
      const form = this.resetPassword;
      if (value && value !== form.getFieldValue("newPassword")) {
        callback("两次输入的密码不相同!");
      } else {
        callback();
      }
    },
    //忘记密码
    forgetPasswordModal() {
      this.forgetPasswordModalShow = true;
    },
    //用户登录
    goLogin() {
      if (!this.userName) {
        this.$warning({
          title: "提示",
          content: "请输入用户名",
          onOk() { },
        });

        return false;
      }
      if (!this.passWord) {
        this.$warning({
          title: "提示",
          content: "请输入密码",
          onOk() { },
        });
        return false;
      }
      // this.passWordFn;
      this.spinningLoading = true;
      //获取菜单—发送post请求
      this.postAxios(this.$loginURL, {
        username: this.userName,
        password: md5(this.passWord),
        grant_type: "password",
        scope: "all",
      })
        .then((res) => {
          // console.log("接口信息返回", res);
          var that = this;
          if (res.token_type == "bearer") {
            this.passWordF;
            localStorage.baoxin = "login";
            // 储存到vuex和local里
            that.$store.commit("SET_USER_INFO1", res.user);
            localStorage.userInfos = res.user;
            //重置密码的方法
            //取出菜单-处理
            var data = res.menus[0].children;

            // //本地缓存菜单
            localStorage.allMenuList = JSON.stringify(data);
            localStorage.menuList = JSON.stringify(data, null, 2);
            // this.$store.dispatch("setmenulist", data);
            //本地缓存token
            localStorage.token = res.access_token;
            localStorage.refreshToken = res.refresh_token;

            //本地缓存用户信息
            this.$store.commit("SET_USER_INFO", res.user);
            localStorage.user = JSON.stringify(res.user);
            //本地缓存权限信息
            localStorage.roles = JSON.stringify(res.roles);
            localStorage.setItem('module_name','')
            that.$router.push("/home/dashbord");
            // that.$router.push("/home/enterpriseInfo/list");
            this.spinningLoading = false;
          }
        })
        .catch((err) => {

          this.$error({
            title: "提示",
            content: err.response.data.error_description || err.response.data.msg,
          });
          this.spinningLoading = false;
        })
        .finally(() => {
          this.spinningLoading = false;
        });
    },
  },
  watch: {},
  computed: {
    passwordG() {
      // 密码强度实时显示
      // 弱密码：全是数字或全是字母，6-16个字符
      const weakReg = /^[0-9]{1,16}$|^[a-zA-Z]{1,16}$/;
      // 中密码：数字和26个英文字母，6-16个字符
      const mediumReg = /^[A-Za-z0-9]{6,16}$/;
      // 强密码：由数字、26个英文字母或者下划线组成的字符串，6-16个字符
      const strongReg = /^\w{6,16}$/;
      if (weakReg.test(this.passWord)) {
        this.isActive = "弱";
        return this.isActive;
      }
      if (mediumReg.test(this.passWord)) {
        this.isActive = "中";
        return this.isActive;
      }
      if (strongReg.test(this.passWord)) {
        this.isActive = "强";
        return this.isActive;
      }
    },
    passWordFn() {
      this.passwordG;
      this.$store.commit("SET_ACTIVE", this.isActive);
    },
  },
};
</script>
<style scoped>
body {
  overflow: hidden;
}

.p_1 {
  letter-spacing: 5px;
  font-size: 40px;
}
</style>
<style>
.ant-menu-item-selected i {
  color: #fff !important;
}
</style>
<style src="./common.css" />
<style src="./gyhlwIndex.css" />
<style lang="less" scoped>
.box_1 {
  background: transparent;
  justify-content: center;

  .box_3 {
    border-radius: 10px;
  }
}
</style>